<template>
    <div class="hotel-booking-list" v-loading="loading" element-loading-text="加载中">
        <el-card class="custom-box-card">
            <div class="custom-header">
                <span class="title">酒店预定列表</span>
            </div>
            <!-- 搜索 -->
            <div class="custom-form-search">
                <el-form @submit.prevent.stop :inline="true" size="mini">
                    <el-form-item label="酒店编号">
                        <el-input v-model="search.hotelId"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="预订人姓名">
                        <el-input v-model="search.username"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="list-table-page">
                <div class="list-table">
                    <el-table border :data="list" style="width: 100%" highlight-current-row>
                        <el-table-column type="index" label="序号" width="100"></el-table-column> <!-- 序号 -->
                        <el-table-column label="酒店编号" width="260">
                            <template v-slot="{ row }">
                                {{ row.hotelId }}
                            </template>
                        </el-table-column>
                        <el-table-column label="房间类型" width="140">
                            <template v-slot="{ row }">
                                {{ row.roomType }}
                            </template>
                        </el-table-column>
                        <el-table-column label="入住日期" width="160">
                            <template v-slot="{ row }">
                                {{ row.checkInDate }}
                            </template>
                        </el-table-column>
                        <el-table-column label="离店日期" width="160">
                            <template v-slot="{ row }">
                                {{ row.checkOutDate }}
                            </template>
                        </el-table-column>
                        <el-table-column label="预订人姓名" width="160">
                            <template v-slot="{ row }">
                                {{ row.username }}
                            </template>
                        </el-table-column>
                        <el-table-column label="有无窗" width="140">
                            <template v-slot="{ row }">
                                {{ row.window }}
                            </template>
                        </el-table-column>
                        <el-table-column label="有无早餐" width="140">
                            <template v-slot="{ row }">
                                {{ row.breakfast }}早餐
                            </template>
                        </el-table-column>
                        <el-table-column label="是否支付" width="120">
                            <template v-slot="{row}">
                            {{ row.payment }}
                            <el-button size="mini" type="primary"
                                    @click="openPayWindow(200, row.orderId)"
                                    v-if="row.status == '未支付'">
                                    去支付
                                </el-button>
                            <span v-else>已支付</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="custom-pagination" style="margin-top: 10px; text-align: center">
                    <el-pagination
                        @current-change="loadList"
                        :current-page="page"
                        :page-size="pagesize"
                        @size-change="sizeChange"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import api from '@/api';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';

export default {
    data() {
        return {
            loading: false,
            list: [],
            search: {
                hotelId: '',
                username: ''
            },
            page: 1, // 当前页
            pagesize: 10, // 页大小
            totalCount: 0 // 总行数
        };
    },
    methods: {
        openPayWindow(amount, orderId) {
            const url = `http://localhost:8088/alipay/hotel/pay?amount=${amount}&orderId=${orderId}`;
            window.open(url, '_self');
        },
        searchSubmit() {
            this.setSearchParamsToCookie();
            this.loadList(1);
        },
        sizeChange(e) {
            this.pagesize = e;
            this.setSearchParamsToCookie();
            this.loadList(1);
        },
        loadList(page) {
            if (this.loading) return;
            this.loading = true;
            this.page = page;
            var filter = this.getSearchParamsFromCookie();
            console.log('LoadList - Filter from Cookie:', filter);
            filter.page = page.toString();
            filter.pagesize = this.pagesize.toString();

            this.$post(api.booking.list, filter).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(err.message);
            });
        },
        setSearchParamsToCookie() {
            const searchParams = {
            hotelId: this.search.hotelId,
            username: this.search.username,
            page: this.page,
            pagesize: this.pagesize
            };
            this.setCookie('searchParams', JSON.stringify(searchParams), 1); // 1表示过期时间1天
            console.log('SetSearchParamsToCookie - Search Params:', searchParams); // 打印存储的筛选条件
        },
        getSearchParamsFromCookie() {
            const cookieValue = this.getCookie('searchParams');
            return cookieValue ? JSON.parse(cookieValue) : {};
        },
        setCookie(name, value, days) {
            var expires = "";
            if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        },
        getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

    },
    created() {
        const searchParams = this.getSearchParamsFromCookie();
        console.log('Created - Search Params from Cookie:', searchParams);
        extend(this.search, searchParams);
        if (searchParams.page) {
            this.page = Math.floor(searchParams.page);
        }
        if (searchParams.pagesize) {
            this.pagesize = Math.floor(searchParams.pagesize);
        }
        this.loadList(this.page);
    },
    mounted() {
        this.setSearchParamsToCookie();
    }
};
</script>

<style type="text/scss" scoped lang="scss">
.hotel-booking-list {
  .custom-box-card {
    .custom-header {
      background: #7fabbe;
      margin: 15px;
      color: #fdfcfc;
      padding: 15px 20px;
      font-weight: bold;
      letter-spacing: 9px;
      border-radius: 8px;
    }

    .custom-form-search {
      padding-left: 20px;
      padding-top: 15px;
      margin-bottom: 20px;
      border-radius: 4px;

      .el-form-item__label {
        color: #333;
        font-weight: bold;
      }

      .el-button {
        background-color: #659ab1;
        color: #fff;
        &:hover {
          background-color: #b3cdd8;
          border: #b3cdd8;
        }
      }
    }

    .list-table-page {
      .list-table {
        padding: 0 20px;

        .el-table__header-wrapper {
          background-color: #f5f7fa;
        }

        .el-table__row {
          &:hover {
            background-color: #f0f0f0;
          }
        }
      }

      .custom-pagination {
        text-align: center;
        margin-top: 20px;
        padding: 0 20px;

        .el-pagination__total {
          font-size: 14px;
          color: #666;
        }

        .el-pagination__sizes .el-select-dropdown__item {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
